/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-indicator {
    &--bar {
        display: flex;
        flex-direction: var(--pure-indicator-direction, row);
        align-items: var(--pure-indicator-align-items, center);
        justify-content: var(--pure-indicator-justify-content, center);
        gap: var(--pure-indicator-gap, 5px);
        position: var(--pure-indicator-position, absolute);
        bottom: var(--pure-indicator-bottom, 10px);
        left: var(--pure-indicator-left, 50%);
        z-index: var(--pure-indicator-z-index, 10);
        padding: var(--pure-indicator-padding);
        transform: var(--pure-indicator-transform, translateX(-50%));
    }

    &__bar-item {
        width: var(--pure-indicator-bar-width, 16px);
        height: var(--pure-indicator-bar-height, 4px);
        border-radius: var(--pure-indicator-bar-border-radius, 4px);
        overflow: hidden;
        background: var(--pure-indicator-color, rgba(0, 0, 0, 0.3));
        position: relative;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: var(--pure-indicator-active-color, var(--pure-theme-primary));
            opacity: 0;
            transition: var(--pure-indicator-transition, 0.5s);
            z-index: 1;
            border-radius: inherit;
        }

        &--active {
            &::after {
                opacity: 1;
                width: 100%;
            }
        }
    }

    &--static {
        position: var(--pure-indicator-position, static);
        margin: var(--pure-indicator-margin, 15px auto);
        transform: var(--pure-indicator-transform);
    }
}
